<template>
	<view class="container">
		<view class="section-header">
			<view class="price">
				￥ <text>{{money}}</text>
			</view>
			<view class="confirm" v-if="type == 'upgrade'">
				升级为<text> {{name}}</text>
			</view>
			<view class="confirm" v-else-if="type == 'renew'">
				续费<text> {{name}}</text>
			</view>
			<view class="confirm" v-else>
				购买<text> {{name}}</text>
			</view>
		</view>
		<view class="section-con">
			<view class="title">
				<view class="">我的账户<text>（可用作抵扣或者提现）</text></view>
			</view>
			<view class="deduction">
				<view class="yt-list-cell-box" v-for="(item,index) in shellList" :key="index">
					<view class="yt-list-cell">
						<image :src="item.image" mode=""></image>
						<text class="cell-tit clamp" v-if="item.available_count != 0">可用{{item.name||''}}{{item.available_count||''}}</text>
						<text class="cell-tit clamp" v-else>无可用{{item.name||''}}</text>
						<evan-switch :size="18" active-color="#57BE6A" :disabled="item.available_count == 0||item.disabled" v-model="item.checked"
						 @change="shellSwitch(item)"></evan-switch>
					</view>
					<view class="lebalBox" v-if="item.checked">
						<text class="lebal">使用{{item.shellDeduction}}，抵扣￥{{item.shellDeduction*item.rate}}</text>
						<text class="change" @tap="shellChange">修改</text>
					</view>
				</view>
				<uni-popup ref="shellChange" type="center">
					<view class="box">
						<image @tap="close" src="../../static/images/center/close.png" mode=""></image>
						<view class="title">{{shellItem.name}}抵扣</view>
						<view class="content">
							<view class="label">
								<text>拥有{{shellItem.name}}</text>
								<text>{{shellItem.available_count}}</text>
							</view>
							<view class="inputBox">
								<text>使用{{shellItem.name}}</text>
								<text>个</text>
								<input type="digit" v-model="shellItem.shellDeduction" @input="shellChanged" />
							</view>
							<view class="inputBox">
								<text>可抵扣</text>
								<text>元</text>
								<input disabled="true" type="text" v-model="shellItem.shellDeduction" />
							</view>
							<view @tap="close" class="btn">确认</view>
						</view>
					</view>
				</uni-popup>
				<view class="yt-list-cell-box">
					<view class="yt-list-cell">
						<view class="cell-icon">
							￥
						</view>
						<text class="cell-tit clamp" v-if="yue">可用余额{{yue||''}}元</text>
						<text class="cell-tit clamp" v-else>无可用余额</text>
						<evan-switch :size="18" active-color="#57BE6A" :disabled="userInfo.now_money == 0" v-model="yueChecked"></evan-switch>
					</view>
					<view class="lebalBox" v-if="yueChecked">
						<text class="lebal">使用￥{{yueDeduction}}，抵扣￥{{yueDeduction}}</text>
						<text class="change" @tap="yueChange()">修改</text>
					</view>
				</view>
				<uni-popup ref="yueChange" type="center">
					<view class="box">
						<image @tap="close" src="../../static/images/center/close.png" mode=""></image>
						<view class="title">余额抵扣</view>
						<view class="content">
							<view class="label">
								<text>拥有余额</text>
								<text>{{userInfo.now_money}}</text>
							</view>
							<view class="inputBox">
								<text>使用余额</text>
								<text>元</text>
								<input type="digit" v-model="yueDeduction" @input="yueChanged" />
							</view>
							<view @tap="close" class="btn">确认</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<view @tap="clickSubmit" class="btn-submit">立即支付 ￥{{needPay}}</view>
		<!-- app选择支付方式 -->
		<choosePay ref="choosePay" @confirm="confirm"></choosePay>
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
	</view>
</template>

<script>
	import utils from "@/common/utils.js"
	import {
		vipBuy
	} from '@/api/pay.js'
	import {
		shellList
	} from "@/api/shell.js"
	import {
		checkPassword,
		getUserInfo
	} from "@/api/user.js"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import wechat from '@/common/wechat.js'
	import choosePay from '@/components/choosePay/choosePay.vue'
	export default {
		data() {
			return {
				type: '', //升级/购买
				id: null, // 升级/购买的会员卡时长卡id
				cardId: null, // 升级/购买的会员卡类型id
				money: '', // 需支付金额
				name: '', // 升级/购买的会员卡名称
				shellItemChange: {
					checked: false,
					id: -1
				},
				shellItem: {}, // 选中要修改的贝壳数据
				shellList: [{
						shellDeduction: 0
					},
					{
						shellDeduction: 0
					},
					{
						shellDeduction: 0
					},
					{
						shellDeduction: 0
					}
				], // 贝壳列表
				yueChecked: false, // 余额抵扣开关状态
				yue: 0, // 用户余额
				yueDeduction: 0, // 用户使用余额
				rate: 1, //黑贝壳兑换比率
				keyboradShow: false, //操作密码键盘显示/隐藏
				provider: "wxpay",
				payType: "weixin",
			}
		},
		components: {
			uniPopup,
			passkeyborad,
			choosePay
		},
		computed: {
			needPay() {
				let needPay = (Number(this.money) - Number(this.yueDeduction) -
					Number(
						this.shellList[0].shellDeduction) - Number(this.shellList[1].shellDeduction) - Number(this.shellList[2].shellDeduction) -
					Number(this.shellList[3].shellDeduction)).toFixed(2)
				return needPay
			},
		},
		created() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.yue = this.userInfo.now_money
			shellList().then(res => {
				this.shellList = res.data.shell_list.map((val, key) => {
					val.checked = false
					val.shellDeduction = 0
					val.disabled = false
					return val
				});
			})
		},
		onLoad(option) {
			let obj = JSON.parse(decodeURIComponent(option.data))
			this.type = obj.type;
			this.id = obj.id;
			this.cardId = obj.cardId;
			this.money = obj.money;
			this.name = obj.name;
		},
		watch: {
			yueChecked: {
				deep: true,
				handler(val, oldval) {
					this.yueCheckeChange();
				}
			},
			shellItemChange: {
				deep: true,
				handler(val, oldval) {
					this.shellCheckeChange();
				}
			}
		},
		methods: {
			shellSwitch(item) {
				this.shellItem = item
				this.shellItemChange.checked = item.checked
				this.shellItemChange.id = item.id
				let _this = this
				if (item.checked) {
					_this.shellList.forEach((items, index) => {
						if (item.id !== items.id) {
							_this.shellList[index].disabled = true
						}
					})
				} else {
					_this.shellList.forEach((items, index) => {
						_this.shellList[index].disabled = false
					})
				}
			},
			// 打开修改贝壳抵扣面板
			shellChange() {
				this.$refs.shellChange.open()
			},
			shellChanged() {
				let _this = this
				this.$nextTick(function() {
					this.shellItem.shellDeduction = utils.verifyNum(this.shellItem.shellDeduction)
				})
				let totalPrice = Number(this.money)
				let otherShellDeduction = 0
				_this.shellList.forEach((item, index) => {
					if (item.id !== _this.shellItem.id) {
						otherShellDeduction = Number(item.shellDeduction) + otherShellDeduction
					}
				})
				if (Number((totalPrice - this.yueDeduction - otherShellDeduction).toFixed(2)) > Number(this.shellItem.available_count)) {
					if (Number(this.shellItem.shellDeduction) > Number(this.shellItem.available_count)) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过可用贝壳数"
							})
							this.shellItem.shellDeduction = Number(this.shellItem.available_count)
						})
					}
				} else {
					if (Number(this.shellItem.shellDeduction) > Number((totalPrice - this.yueDeduction - otherShellDeduction).toFixed(2))) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过需支付金额"
							})
							this.shellItem.shellDeduction = Number((totalPrice - this.yueDeduction - otherShellDeduction).toFixed(2))
						})
					}
				}
			},
			//改变贝壳抵扣开关
			shellCheckeChange() {
				let _this = this
				let otherShellDeduction = 0
				this.shellList.forEach((item, index) => {
					if (item.id !== _this.shellItem.id) {
						otherShellDeduction = Number(item.shellDeduction) + otherShellDeduction
					}
				})
				if (this.shellItem.checked) {
					if (Number(this.shellItem.available_count) > Number((Number(this.money) - otherShellDeduction - this.yueDeduction).toFixed(2))) {
						this.shellItem.shellDeduction = Number((Number(this.money) - otherShellDeduction - this.yueDeduction).toFixed(2))
					} else {
						this.shellItem.shellDeduction = Number(this.shellItem.available_count)
					}

				} else {
					this.shellItem.shellDeduction = 0
				}
			},
			// 打开修改余额抵扣面板
			yueChange() {
				this.$refs.yueChange.open()
			},
			// 修改抵扣余额
			yueChanged() {
				let _this = this
				this.$nextTick(function() {
					this.yueDeduction = utils.verifyNum(this.yueDeduction)
				})
				let totalPrice = Number(this.money)
				let otherShellDeduction = 0
				_this.shellList.forEach((item, index) => {
					otherShellDeduction = Number(item.shellDeduction) + otherShellDeduction
				})
				if (Number((totalPrice - otherShellDeduction).toFixed(2)) > Number(this.userInfo.now_money)) {
					if (Number(this.yueDeduction) > Number(this.userInfo.now_money)) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过可用余额"
							})
							this.yueDeduction = Number(this.userInfo.now_money)
						})
					}
				} else {
					if (Number(this.yueDeduction) > Number((totalPrice - otherShellDeduction).toFixed(2))) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过需支付金额"
							})
							this.yueDeduction = Number((totalPrice - otherShellDeduction).toFixed(2))
						})
					}
				}
			},
			//改变余额抵扣开关
			yueCheckeChange() {
				let otherShellDeduction = 0
				this.shellList.forEach((item, index) => {
					otherShellDeduction = Number(item.shellDeduction) + otherShellDeduction
				})
				if (this.yueChecked) {
					if (Number(this.userInfo.now_money) > Number((Number(this.money) - otherShellDeduction).toFixed(2))) {
						this.yueDeduction = Number((Number(this.money) - otherShellDeduction).toFixed(2))
					} else {
						this.yueDeduction = Number(this.userInfo.now_money)
					}
				} else {
					this.yueDeduction = 0
				}
			},
			close() {
				this.$refs.shellChange.close()
				this.$refs.yueChange.close()
			},
			clickSubmit() {
				if (this.needPay == 0) {
					if (!uni.getStorageSync("userInfo").withdraw_pass) {
						uni.showModal({
							content: "0元支付需设置操作密码",
							confirmText: "去设置",
							cancelText: "取消",
							confirmColor: "#57BE6A",
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
									})
								} else if (res.cancel) {}

							}
						})
						return
					}
					this.keyboradShow = true
				} else {
					//#ifndef APP-PLUS
					this.submit()
					//#endif
					//#ifdef APP-PLUS
					this.$refs.choosePay.show()
					//#endif
				}
			},
			finished(password) {
				uni.showLoading({
					mask:true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.submit()
				})
			},
			confirm(e) {
				this.payType = e.payType
				this.provider = e.provider
				this.submit()
			},
			keyboradClose() {
				this.keyboradShow = false
			},
			submit() {
				uni.showLoading({
					mask:true
				})
				let _this = this
				let obj = {
					id: _this.id,
					// #ifdef MP-WEIXIN
					from: "routine",
					// #endif
					// #ifdef APP-PLUS
					from: "app",
					// #endif
					// #ifdef H5
					from: "weixin",
					// #endif
					payType: this.payType,
					now_money: _this.yueDeduction,
					use_black_conch: Number(_this.shellList[0].shellDeduction),
					use_yellow_conch: Number(_this.shellList[1].shellDeduction),
					use_red_conch: Number(_this.shellList[2].shellDeduction),
					use_blue_conch: Number(_this.shellList[3].shellDeduction),
				}
				vipBuy(obj).then(res => {
					if (res.data.status == "ZERO_SUCCESS") {
						getUserInfo().then(res => {
							uni.setStorage({
								key: 'userInfo',
								data: res.data,
								success: function() {
									uni.hideLoading()
									_this.$api.msg('支付成功')
									uni.redirectTo({
										url: "/pages/center/vip/vipSuccess?money=" + _this.money
									})
								}
							})
						})
					} else {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.result.jsConfig.timestamp,
							nonceStr: res.data.result.jsConfig.nonceStr,
							package: res.data.result.jsConfig.package,
							signType: 'MD5',
							paySign: res.data.result.jsConfig.paySign,
							success: (e) => {
								getUserInfo().then(res => {
									uni.setStorage({
										key: 'userInfo',
										data: res.data,
										success: function() {
											uni.hideLoading()
											_this.$api.msg('支付成功')
											uni.redirectTo({
												url: "/pages/center/vip/vipSuccess?money=" + _this.money
											})
										}
									})
								})
							}
						})
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.provider,
							orderInfo: res.data.result.jsConfig,
							success: (e) => {
								getUserInfo().then(res => {
									uni.setStorage({
										key: 'userInfo',
										data: res.data,
										success: function() {
											uni.hideLoading()
											_this.$api.msg('支付成功')
											uni.redirectTo({
												url: "/pages/center/vip/vipSuccess?money=" + _this.money
											})
										}
									})
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
						// #endif
						//#ifdef H5
						// h5支付
						let url = "/pages/center/vip/vipSuccess?money=" + _this.money
						wechat.pay(res.data.result.jsConfig, url, false)
						//#endif
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.section-header {
			background-color: #fff;
			text-align: center;
			padding: 70rpx 0;

			// .time{
			// 	font-size:22rpx;
			// 	color:rgba(51,51,51,1);
			// 	text{
			// 		padding: 5rpx;
			// 		background-color: #333;
			// 		border-radius:4rpx;
			// 		font-size:22rpx;
			// 		color:rgba(255,255,255,1);
			// 		margin-left: 20rpx;
			// 	}
			// }
			.price {
				font-size: 30rpx;
				color: #333;
				margin: 35rpx 0;
				font-weight: bold;

				text {
					font-size: 60rpx;
				}
			}

			.confirm {
				font-size: 24rpx;

				text {
					font-size: 30rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
		}

		.section-con {
			width: 94%;
			margin: 80rpx auto;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				padding-left: 20rpx;

				text {
					font-size: 20rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
			}

			.deduction {
				background-color: #fff;
				border-radius: 14rpx;
				margin-top: 10rpx;

				.yt-list-cell-box {
					padding: 20rpx 0;
					border-bottom: 1rpx solid #eee;

					.lebalBox {
						padding: 30rpx 40rpx;
						line-height: 20rpx;
						display: flex;
						justify-content: space-between;

						.lebal {
							font-size: 20rpx;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
						}

						.change {
							font-size: 16rpx;
							color: rgba(51, 51, 51, 1);
							width: 59rpx;
							height: 24rpx;
							line-height: 20rpx;
							border-radius: 10rpx;
							text-align: center;
							background-color: #e5e5e5;
						}
					}

				}

				.yt-list-cell {
					display: flex;
					align-items: center;
					padding: 10rpx 30rpx 10rpx 40rpx;
					line-height: 70rpx;
					position: relative;

					&.b-b:after {
						left: 30rpx;
					}

					image {
						height: 24rpx;
						width: 33rpx;
						margin-right: 12rpx;
					}

					.cell-icon {
						height: 32rpx;
						width: 32rpx;
						border-radius: 16rpx;
						font-size: 22rpx;
						color: #fff;
						text-align: center;
						line-height: 32rpx;
						background: $mall-price;
						margin-right: 12rpx;
						font-weight: bold;

					}

					.cell-more {
						align-self: center;
						font-size: 24rpx;
						color: #909399;
						margin-left: 8rpx;
						margin-right: -10rpx;
					}

					.cell-tit {
						flex: 1;
						font-size: 26rpx;
						color: #333;
						margin-right: 10rpx;
					}

					.cell-tip {
						font-size: 26rpx;
						color: #333;
						font-weight: bold;
					}

					&.desc-cell {
						.cell-tit {
							max-width: 90rpx;
						}
					}

					.desc {
						flex: 1;
						font-size: 28rpx;
						color: #303133;
					}

					.red {
						color: $mall-price;

						&:before {
							content: '￥';
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.btn-submit {
			height: 86rpx;
			line-height: 86rpx;
			background: rgba(251, 55, 55, 1);
			border-radius: 43rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			width: 91%;
			margin: 150rpx auto 100rpx;
		}

		.box {
			background-color: #fff;
			position: relative;
			width: 600rpx;
			padding: 36rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			image {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				width: 26rpx;
				height: 26rpx;
			}

			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.content {
				.label {
					display: flex;
					justify-content: center;
					font-size: 28rpx;
					color: #333;
					margin-top: 46rpx;
					align-items: center;

					text:nth-of-type(2) {
						margin-left: 8rpx;
						font-weight: bold;
					}
				}

				.inputBox {
					position: relative;
					height: 114rpx;
					line-height: 114rpx;
					border-bottom: 1rpx solid #eee;

					text:nth-of-type(1) {
						font-size: 28rpx;
						position: absolute;
						top: 0;
						left: 0;
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						position: absolute;
						top: 0;
						right: 0;
					}

					input {
						height: 114rpx;
						text-align: right;
						padding-right: 58rpx;
						font-size: 56rpx;
					}
				}

				.btn {
					margin: 40rpx 0 0;
					// width: 528rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					height: 80rpx;
					background: $theme-color;
					border-radius: 40rpx;
				}
			}
		}
	}

	.box {
		background-color: #fff;
		position: relative;
		width: 600rpx;
		padding: 36rpx;
		box-sizing: border-box;
		border-radius: 10rpx;

		image {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 26rpx;
			height: 26rpx;
		}

		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content {
			.label {
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #333;
				margin-top: 46rpx;
				align-items: center;

				text:nth-of-type(2) {
					margin-left: 8rpx;
					font-weight: bold;
				}
			}

			.inputBox {
				position: relative;
				height: 114rpx;
				line-height: 114rpx;
				border-bottom: 1rpx solid #eee;

				text:nth-of-type(1) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				text:nth-of-type(2) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				input {
					height: 114rpx;
					text-align: right;
					padding-right: 58rpx;
					font-size: 56rpx;
				}
			}

			.btn {
				margin: 40rpx 0 0;
				width: 528rpx;
				height: 80rpx;
				background: $mall-price;
				border-radius: 40rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}
		}

	}
</style>
